import React, { RefObject, useRef } from 'react';
import './Wave.scss';
import gsap from 'gsap';
import { animateObj, animationBaseProps } from '../Animation';
import { createLabel } from '../utils/animationTools';

const Wave: React.FC<animationBaseProps<null>> = (props) => {
  const circleRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    createCircleGsap(props.animateObj.t1, circleRef.current, props.animateObj);
    return function cleanup() {
      console.log('组件被卸载componentWillUnmount');
    };
  }, []);

  return <div className={'wave-box'}>
    <div ref={circleRef} className={'circle-move'}/>
  </div>;
};

function createCircleGsap(t1: GSAPTimeline, target: HTMLDivElement|null, animateObj: animateObj<null>) {
  const config = [
    target, {
      zoom: 0.5,
      opacity: 1
    }, {
      duration: 1,
      zoom: 1,
      opacity: 0,
      ease: 'circ.out'
    }
  ];
  const times = Math.floor(animateObj.duration);
  Array(times).fill(1).forEach(() => {
    // @ts-ignore
    t1.add(gsap.fromTo(...config));
  });

  createLabel(t1, animateObj);
}

export default Wave;
